<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程社区 - 在线学习与交流</title>
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/discuss.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <!-- 主内容 -->
    <main>
        <section id="community" class="section">
            <div class="container">
                <!-- 左边栏 -->
                <div class="left-column">
                    <!-- 热门话题 -->
                    <div id="popular-topics" class="topics-section">
                        <h3>热门话题</h3>
                        <ul>
                            <li><a href="#">如何高效学习算法？</a></li>
                            <li><a href="#">代码重构的最佳实践</a></li>
                            <li><a href="#">如何参与开源项目？</a></li>
                        </ul>
                    </div>
                    <!-- 活跃用户榜 -->
                    <div id="active-users" class="users-section">
                        <h3>活跃用户榜</h3>
                        <ol>
                            <li>用户A - 发帖: 30</li>
                            <li>用户B - 发帖: 28</li>
                            <li>用户C - 发帖: 24</li>
                        </ol>
                    </div>
                    <!-- 社区规则 -->
                    <div id="community-rules" class="rules-section">
                        <h3>社区规则</h3>
                        <ul>
                            <li>分享优质代码片段或技巧。</li>
                            <li>讨论需与编程相关。</li>
                            <li>文明发言，互相尊重。</li>
                        </ul>
                        <a href="/html/community-rules.html">查看详细规则</a>
                    </div>
                </div>

                <!-- 中间栏 -->
                <div class="center-column">
                    <!-- 社区动态 -->
                    <div id="community-posts" class="posts-section">
                        <h3>社区动态</h3>
                    </div>
                </div>

                <!-- 右边栏 -->
                <div class="right-column">
                    <!-- 发布新内容表单 -->
                    <div id="post-form" class="form-section">
                        <h3>发布新内容</h3>
                        <form onsubmit="return submitPost()">
                            <label for="post-content">内容:</label>
                            <textarea id="post-content" name="content" rows="4" placeholder="分享您的代码、心得或问题..." required></textarea>
                            
                            <label for="post-category">分类:</label>
                            <select id="post-category" name="category" required>
                                <option value="学习心得">学习心得</option>
                                <option value="问题求助">问题求助</option>
                                <option value="开源项目">开源项目</option>
                            </select>

                            <label for="post-tags">标签:</label>
                            <div id="post-tags" class="tags-checkboxes">
                                <label><input type="checkbox" name="tags" value="算法"> 算法</label>
                                <label><input type="checkbox" name="tags" value="前端"> 前端</label>
                                <label><input type="checkbox" name="tags" value="后端"> 后端</label>
                            </div>

                            <label for="post-image">上传图片:</label>
                            <input type="file" id="post-image" name="image" accept="image/*" />

                            <button type="submit">发布</button>
                        </form>
                    </div>

                    <!-- 推荐区域 -->
                    <div class="recommendation-section">
                        <h3>推荐教程</h3>
                        <ul class="recommendation-list">
                            <li><a href="#">Python 基础教程</a></li>
                            <li><a href="#">前端开发入门</a></li>
                            <li><a href="#">后端框架详解</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="../js/discuss.js"></script>
</body>
</html>
